<template>
  <div class="header-container">
    <div class="left-content">
      <el-icon color="#409efc" style="cursor: pointer" :size="20" class="no-inherit" @click="handleMenu()">
        <DArrowRight v-if="isCollapse" />
        <DArrowLeft v-else />
      </el-icon>
      <!-- 面包屑 -->
      <transition name="el-fade-in-linear">
        <el-breadcrumb separator="/" class="text">
          <el-breadcrumb-item :to="{ path: tags.path }">{{ tags.menuInfoName }}</el-breadcrumb-item>
          <template v-if="tags.children">
            <el-breadcrumb-item v-for="child in tags.children" :key="child.path" :to="{ path: child.path }">
              {{ child.menuInfoName }}
            </el-breadcrumb-item>
          </template>
        </el-breadcrumb>
      </transition>
    </div>
    <div class="right-content">
      <el-button type="text" @click="goToInbox">
        <el-icon><Refresh /></el-icon>
        <span class="button-text">中 / 英</span>
      </el-button>
      <el-button type="text" @click="goToSettings">
        <el-icon><Setting /></el-icon>
        <span class="button-text">设置</span>
      </el-button>
      <el-button type="text" @click="showNotifications">
        <el-icon><Message /></el-icon>
        <span class="button-text">通知</span>
      </el-button>
      <div>
        <span class="el-dropdown-link">
          <img
            src="https://resourcesza.oss-cn-guangzhou.aliyuncs.com/portraits/2022082717582987.jpg"
            alt=""
            class="user"
          />
        </span>
      </div>
      <el-dropdown class="button-text">
        <span class="el-dropdown-link">
          信号差
          <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>个人中心</el-dropdown-item>
            <el-dropdown-item @click="bmke()">退出</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>  

<script>
// @ is an alias to /src
// import { getDate, login } from '../api/userApi'
import { mapState } from 'vuex'
import Cookie from 'js-cookie'

import { ElNotification } from 'element-plus'
import { Message, Setting, Refresh } from '@element-plus/icons-vue' // Add necessary icons

export default {
  name: 'UserLogView',
  data() {
    return {
      // 可以在这里定义组件的数据
    }
  },
  methods: {
    handleMenu() {
      this.$store.commit('collapseMenu')
    },
    bmke() {
      Cookie.remove('token')
      this.$router.push('/login')
      ElNotification({
        message: '已退出',
        offset: 100,
        type: 'success',
        duration: 2000
      })
      this.$store.commit('closeAll')
    },
    goToInbox() {
      // this.$router.push('/inbox')
      ElNotification({
        message: '开发中',
        offset: 100,
        type: 'info',
        duration: 2000
      })
    },
    goToSettings() {
      // this.$router.push('/settings')
      ElNotification({
        message: '开发中',
        offset: 100,
        type: 'info',
        duration: 2000
      })
    },
    showNotifications() {
      ElNotification({
        message: '您有新的通知',
        offset: 100,
        type: 'info',
        duration: 2000
      })
    }
  },
  computed: {
    ...mapState({
      tags: (state) => state.breadcrumbList,
      isCollapse: (state) => state.isCollapse
    })
  },
  components: {
    Message,
    Setting,
    Refresh
  }
}
</script>  

<style lang="less" scoped>
.header-container {
  background-color: #ffffff;
  border-bottom: 1px solid rgb(255, 253, 253);
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  color: white;

  .right-content {
    display: flex;
    align-items: center;
    .el-button {
      margin-right: 15px; /* 增加右边距 */
      display: flex;
      align-items: center; /* 垂直居中 */
    }

    .button-text {
      margin-left: 8px; /* 增加文本与图标之间的间距 */
      font-size: 15px; /* 调整文本的大小 */
      color: #707070; /* 文本颜色 */
      cursor: pointer;
    }

    .user {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
  }

  .left-content {
    display: flex;
    align-items: center;

    .text {
      margin-left: 10px;
      font-size: 14px;
      color: #666;
    }
  }
}
</style>